<template>
	<view class="article-page">

		<!-- 构建一个智能文章阅读页面
		设计思路：
					手机竖屏（默认）: 核心阅读区 + 底部悬浮工具栏。
					手机横屏: 隐藏工具栏，进入沉浸式阅读模式，并提示用户为获得更佳体验建议竖屏。
					平板（中等屏幕）: 左侧文章内容，右侧显示作者信息和推荐阅读侧边栏。
					桌面（大屏幕）: 三栏布局，左侧为目录，中间是文章内容，右侧是作者信息和推荐。
					特殊情况: 在一个非常矮的屏幕上（如分屏模式），底部工具栏将变为更小的图标样式。在一个特定的“海报分享”尺寸（例如 375x667），显示一个特别的分享按钮。
		-->

		<!-- 场景: 桌面端大屏布局 (>= 1200px) -->
		<match-media :min-width="1200">
			<view class="layout-desktop">
				<view class="sidebar-left">文章目录</view>
				<view class="main-content">文章正文...</view>
				<view class="sidebar-right">作者信息和推荐阅读</view>
			</view>
		</match-media>

		<!-- 场景: 平板中屏布局 (768px - 1199px) -->
		<match-media :min-width="768" :max-width="1199">
			<view class="layout-tablet">
				<view class="main-content">文章正文...</view>
				<view class="sidebar-right">作者信息和推荐阅读</view>
			</view>
		</match-media>

		<!-- 场景: 手机小屏布局 (< 768px) -->
		<match-media :max-width="767">
			<view class="layout-mobile">
				<view class="main-content">文章正文...</view>

				<!-- 子场景1: 针对竖屏且高度足够的情况，显示完整工具栏 -->
				<match-media :orientation="'portrait'" :min-height="500">
					<view class="bottom-toolbar-full">完整工具栏 (点赞、评论、分享)</view>
				</match-media>

				<!-- 子场景2: 针对竖屏但高度很矮的情况 (如分屏)，显示简化工具栏 -->
				<match-media :orientation="'portrait'" :max-height="499">
					<view class="bottom-toolbar-mini">简化图标工具栏</view>
				</match-media>

				<!-- 子场景3: 针对横屏情况，进入沉浸式阅读 -->
				<match-media :orientation="'landscape'">
					<view class="immersive-tip">沉浸式阅读中... 建议竖屏以获得完整功能</view>
				</match-media>

				<!-- 子场景4 (彩蛋): 针对特定iPhone 8尺寸，显示特别的分享按钮 -->
				<match-media :width="375" :height="667">
					<view class="special-share-button">生成我的阅读海报</view>
				</match-media>
			</view>
		</match-media>
	</view>
</template>

<style>
	/* 省略样式，仅用于说明布局结构 */
	.layout-desktop {
		display: flex;
	}

	.sidebar-left,
	.sidebar-right {
		flex-shrink: 0;
		width: 200px;
	}

	.main-content {
		flex-grow: 1;
	}

	.layout-tablet {
		display: flex;
	}

	.bottom-toolbar-full,
	.bottom-toolbar-mini {
		position: fixed;
		bottom: 0;
		width: 100%;
		background: #fff;
		text-align: center;
		padding: 10px;
	}

	.immersive-tip {
		position: fixed;
		top: 10px;
		left: 10px;
		background: rgba(0, 0, 0, 0.5);
		color: #fff;
		padding: 5px;
		border-radius: 5px;
	}

	.special-share-button {
		position: fixed;
		bottom: 80px;
		right: 20px;
		background: gold;
		padding: 10px;
		border-radius: 50%;
	}
</style>